<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app">
    <div id="center-sidebar">
        <div class="menu-toggle" >
            <img @click="toggleMenu" src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6648cb5a590beca814406cbb_%E6%89%A9%E5%B1%95.svg" alt="Toggle Menu" class="toggle-icon">
        </div>
        <div class="menu" id="menu" v-show="showMenuT" :style="{ width: showMenuT ? '200px' : '0' }">
        <!-- 菜单内容，其它链接 -->
    <a href="#home" title="首页"><img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/664235271d8eac4478a66d47_home.svg" alt="首页"></a>
    <a href="#services" @click="showMenu = !showMenu" title="主题">
    <img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/664236437a586d24176ab4bc_%E9%9B%86%E5%90%88%20(1).svg" alt="主题切换">
    <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
          <strong>切换主题</strong>
          <q-icon name="keyboard_arrow_right"/>
        </q-tooltip>
    </a>
   <q-menu v-show="showMenu" anchor="top right" self="top left">
        <q-list>
            <!-- 递归渲染菜单项   -->
            <menu-item v-for="topic in topics" :key="topic.topicid" :topic="topic" @topic-change="initmount" ></menu-item>

        </q-list>
    </q-menu>
    <a href="#about" title="思维导图"><img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/664234a063912f86af880807_%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE.svg" alt="思维导图"></a>
    <a href="#contact" id="damoxing" title="大模型会话"><img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6642351dbb5ce2c5f0550628_%E4%BC%9A%E8%AF%9D.svg" alt="大模型"></a>
  </div>
    </div>
</div>
</body>
</html>


<script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>

<script src="https://wxserver.cards120.com/static/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
        return {
            showMenuT: false  // 初始状态设置为false，菜单不展开
        };
    },
    methods: {
        toggleMenu() {
            this.showMenuT = !this.showMenuT;  // 切换菜单的显示状态
        }
    }
});

</script>
<style>
/* 基础样式设置，保证整体页面的美观性 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;  /* 防止水平滚动 */
    font-family: Arial, sans-serif;  /* 设置字体 */
}

/* 定位侧边栏 */
#center-sidebar {
    position: fixed;
    left: 0;  /* 始终固定在左侧 */
    top: 50%;  /* 纵向位置设置在视窗的一半 */
    transform: translateY(-50%);  /* 使用 transform 对齐到视窗中心 */
    width: 60px;  /* 初始宽度，足以展示图标 */
    background-color: #fff;  /* 背景色 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* 阴影效果增加立体感 */
    border-radius: 30px;  /* 圆角边框 */
    transition: width 0.3s;  /* 平滑的宽度变化动画 */
    z-index: 1000;  /* 确保侧边栏在其他内容之上 */
}

/* 控制悬浮图标和菜单的显示 */
.menu-toggle {
    padding: 10px;
    cursor: pointer;  /* 鼠标悬停时显示手型指针，指示这是一个可点击的元素 */
}

.menu-toggle img {
    width: 30px;  /* 图标大小 */
    height: 30px;  /* 图标大小 */
    transition: transform 0.3s ease;  /* 动画效果，使图标旋转更平滑 */
}

/* 侧边栏菜单项样式 */
#center-sidebar .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    width: 0;  /* 初始状态下，菜单宽度为0，不显示内容 */
    overflow: hidden;  /* 隐藏溢出的内容 */
    transition: width 0.3s;  /* 菜单宽度变化的动画 */
}

/* 鼠标悬浮在菜单栏上时，自动展开 */
#center-sidebar:hover .menu {
    width: 200px;  /* 鼠标悬浮时展开的宽度 */
}

/* 链接样式 */
#center-sidebar .menu a {
    color: #333;  /* 链接颜色 */
    text-decoration: none;  /* 去除下划线 */
    display: block;  /* 每个链接独占一行 */
    margin: 10px 0;  /* 链接之间的间隙 */
}

#center-sidebar .menu a img {
    width: 30px;  /* 菜单项图标大小 */
    height: 30px;  /* 菜单项图标大小 */
}
.menu {
    max-width: 50px;
}
#center-sidebar {
   max-width: 0px;
}

</style>